import { RouteRecordRaw } from 'vue-router'

/**
 * 这里的path是相对于src/views的路径，如：/pro-components/button.vue
 * path即是页面的路由路径，也是组件的路径，同时也是菜单的name
 * 必须以/开头，使用全路径
 */
const menuData = [
  {
    path: '/pro-components',
    meta: { title: '二次封装组件', icon: 'Menu' },
    redirect: '/pro-components/button',
    children: [
      {
        path: '/pro-components/button',
        meta: { title: 'button组件', icon: 'Document' },
      },
      {
        path: '/pro-components/select-group',
        meta: { title: 'selectGroup', icon: 'Document' },
      },
      {
        path: '/pro-components/child',
        meta: { title: 'child', icon: 'Document' },
        redirect: '/pro-components/child/child1',
        children: [
          {
            path: '/pro-components/child/child1',
            meta: { title: '图片预览', icon: 'Document' },
          },
          {
            path: '/pro-components/child/child2',
            meta: { title: '图片预览2', icon: 'Document' },
          },
          {
            path: '/pro-components/child/child3',
            meta: { title: '图片预览3', icon: 'Document' },
          },
          {
            path: '/pro-components/child/child4',
            meta: { title: '图片预览4', icon: 'Document' },
          },
          {
            path: '/pro-components/child/child5',
            meta: { title: '图片预览5', icon: 'Document' },
          },
        ],
      },
    ],
  },
  {
    path: '/tracker',
    meta: { title: '埋点', icon: 'Monitor' },
  },
  {
    path: '/test-token',
    meta: { title: '测试token', icon: 'Monitor' },
  },
]

// 递归遍历菜单数据，给每个菜单项添加name属性
function addName(menuItems: Menu[]) {
  menuItems.forEach((menuItem) => {
    menuItem.name = menuItem.path.replace(/^\//, '').split('/').join('-')
    if (menuItem.children) {
      addName(menuItem.children)
    }
  })
}
addName(menuData)

const menuRoutes: RouteRecordRaw[] = []

function generateRoutes(menuItems: Menu[], children: RouteRecordRaw[]) {
  menuItems.forEach((menuItem) => {
    const filePath = menuItem.path
    const route: RouteRecordRaw = {
      ...menuItem,
      /**
       * modules 是一个文件路径和组件的键值对，如：../views/pro-components/button.vue: () => import("/src/views/pro-components/button.vue")
       * modules[`../views${filePath}.vue`] 会根据文件路径找到对应的组件，这里必须用相对路径，否则无法找到对应组件
       * modules[`../views${filePath}.vue`] 是一个函数，调用这个函数会返回一个promise，promise的结果是组件
       * component: modules[`../views${filePath}.vue`] 是一个异步组件，这个异步组件会在路由跳转的时候才会加载
       * 如果有redirect属性，配置了path会自动加载对应的组件，如果没有配置path，或者path不存在，就不会加载组件，不影响路由跳转
       */
      component: modules[`../views${filePath}.vue`],
      children: [],
    }
    if (menuItem.children) {
      generateRoutes(menuItem.children, route.children)
    }
    children.push(route)
  })
}

const modules = import.meta.glob('../views/**/*.vue')
generateRoutes(menuData, menuRoutes)

export { menuRoutes, menuData }
